<template>
    <div class="content">
       <el-dialog
            title="结束课程的原因"
            :visible.sync="dialogVisible.isShow"
            size="tiny">
            <el-form ref="canelLesson" :model="formInline" label-width="28px" :rules="rules" >
                <el-row :gutter="20">
                    <el-col> 
                        <el-form-item label=" " prop="reasonContent">
                            <el-popover placement="top-start" trigger="focus" content="字符长度不大于300个字" >
                                <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 10}" v-model="formInline.reasonContent" placeholder="请填写结束课程原因，300字内" :maxlength="300" slot="reference"></el-input>
                            </el-popover>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row type="flex" class="btn-group" justify="center" >
                    <el-col :span="4">
                        <el-button @click="cancel">取 消</el-button>
                    </el-col>
                     <el-col :span="4">
                        <el-button type="primary" @click="submit('canelLesson')">确 定</el-button>
                    </el-col>
                </el-row> 
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { stopLessonByLessonId } from 'api/onlineLesson';
export default {
    props: {
        dialogVisible: {
            default() {
                return {
                    isShow: false // 默认不显示
                }
            }
        },
        lessonId: {
            default: ''
        }
    },
    data() {
        return {
            formInline: {
                reasonContent: '' // 结束课程原因
            },
            rules: {
                reasonContent: [
                    { required: true, message: '请输入结束课程的原因', trigger: 'blur' }
                    // { pattern: /^[^\s]+$/, message: '请不要输入空格！', trigger: 'blur'}
                ]
            }
           
        };
    },
    watch: {
        ['dialogVisible.isShow'](val) {
            if (!val) this.reset();     
        }
    },
    methods: {
        // 提交
        submit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$confirm('确定结束课程?', ' ', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消'
                    })
                    .then(() => {
                        stopLessonByLessonId(this.lessonId, this.formInline.reasonContent).then(response => {
                            if (response.data.status == 200) {
                                let flag =response.data.content;
                                if (flag) {
                                    this.$message({
                                        type: 'success',
                                        message: '课程结束！'
                                    });
                                // 关闭
                                    this.closeDialog();
                                }
                               

                            } else {
                                this.$message({
                                    type: 'warning',
                                    message: response.data.errorMsg
                                });
                            }
                        
                        });
                    })
                    .catch(e => {
                        this.cancel();
                    });   
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },

         // 重置弹框
        reset() {
            this.$refs['canelLesson'].resetFields();
        },

        // 取消
        cancel() {
            this.formInline.reasonContent = '';
            this.dialogVisible.isShow = false;
        },

        
        // 关闭弹框
        closeDialog() {
            this.formInline.reasonContent = '';
            // 更新数据1
            this.$emit('update-list');
            
            this.dialogVisible.isShow = false;    
        }
    }
}
</script>

<style lang="scss" scoped>
.btn-group{
    padding-top: 10px;
}

</style>


